let React = require('react');

var userInfo;

var WordList = React.createClass({
  getInitialState: function () {
    return {
      resultList: []
    };
  },

  componentDidMount: function () {
    $.getJSON(baseUrl + "getSelfWordList/" + userInfo.blog_id, function (result, status) {
      console.log(result.data);
      if (this.isMounted()) {
        this.setState({
          resultList: result.data
        });
      }
    }.bind(this));
  },

  handleDeleteWord: function (id) {
    $.getJSON(baseUrl + "delWordById/" + id, function (result, status) {
      console.log(result.data);
      if (this.isMounted()) {
        this.setState({
          resultList: result.data
        });
      }
    }.bind(this));
  },

  render: function () {
    return (
      <div>
        <div className="devide-title"><h1>留言</h1></div>
        <div className="comment-list">
          {this.state.resultList.map(function (e) {
          var inputId = 'inline-comment-box-' + e.id;
          return (
              <div className="comment" key={e.id}>
                <div className="comment-image">
                  <img alt="Logo image" src="avatar.png"/>
                </div>
                <div className="comment-content">
                  <h1>{e.from.username}</h1>
                  <p>{e.word}</p>
                  <a href="#" onClick={this.handleDeleteWord.bind(this, e.id)}>删除</a>
                </div>
              </div>
          )
        }, this)}
        </div>
      </div>
    );
  }
});

var CommentList = React.createClass({
  getInitialState: function () {
    return {
      resultList: []
    };
  },

  componentDidMount: function () {
    $.getJSON(baseUrl + "getSelfCommentList/" + userInfo.blog_id, function (result, status) {
      console.log(result.data);
      if (this.isMounted()) {
        this.setState({
          resultList: result.data
        });
      }
    }.bind(this));
  },

  handleDeleteWord: function (id) {
    $.getJSON(baseUrl + "delSelfComment/" + id, function (result, status) {
      console.log(result.data);
      if (this.isMounted()) {
        this.setState({
          resultList: result.data
        });
      }
    }.bind(this));
  },

  handleAuthWord: function (id) {
    $.getJSON(baseUrl + "commentSetVisible/" + id, function (result, status) {
      console.log(result.data);
      if (this.isMounted()) {
        this.setState({
          resultList: result.data
        });
      }
    }.bind(this));
  },

  render: function () {
    return (
      <div>
        <div className="devide-title"><h1>评论</h1></div>
        <div className="comment-list">
          {this.state.resultList.map(function (e) {
          if (e.visible) {
            return (
                <div className="comment" key={e.id}>
                  <div className="comment-image">
                    <img alt="Logo image" src="avatar.png"/>
                  </div>
                  <div className="comment-content">
                    <h1>{e.from.username}</h1>
                    <p>{e.comment}</p>
                    <a href="#" onClick={this.handleDeleteWord.bind(this, e.id)}>删除</a>
                  </div>
                </div>
            );
          } else {
            return (
                <div className="comment" key={e.id}>
                  <div className="comment-image">
                    <img alt="Logo image" src="avatar.png"/>
                  </div>
                  <div className="comment-content">
                    <h1>{e.from.username}</h1>
                    <p>{e.comment}</p>
                    <a href="#" onClick={this.handleDeleteWord.bind(this, e.id)}>删除</a>
                    <a href="#" onClick={this.handleAuthWord.bind(this, e.id)}>可见</a>
                  </div>
                </div>
            );
          }
          
        }, this)}
        </div>
      </div>
    );
  }
});

var Manager = React.createClass({
  getInitialState: function () {
    return {
      isDone: false
    };
  },

  componentDidMount: function () {
    $.getJSON(baseUrl + "getCurrentUser").done(function (result) {
      switch (result.code) {
      case 900:
        userInfo = result.data[0];
        if (this.isMounted()) {
          this.setState({
            isDone: true
          });
        }
        break;
      case 912:
        console.log(result.message);
        location.href = "/"
        break;
      }
    }.bind(this));
  },

  render: function () {
    if (this.state.isDone) {
      return (
        <div className="blog">
          <WordList/>
          <CommentList/>
        </div>
      );
    } else {
      return (
        <div>加载中</div>
      );
    }

  }
});

module.exports = Manager;
